<template>

  <div class="box">
    <div class="content">
      <img class="login-img images1" src="../assets/images/login.jpg" alt="登录">
      <img class="register-img images2" src="../assets/images/register.jpg" alt="注册">
      <div class="login-wrapper">
        <div class="slogan">
          <span class="slogan-foruser">欢迎:)</span>
          <span class="slogan-change" data-page="login">注册</span>
        </div>
        <h1 class="text">登录</h1>
        <div class="xiaolu">

        </div>

          <div class="login-form">
            <div class="user-form form-item">
              <div class="text-tips">
                <span class="tip">账号</span>
<!--                <c:if test="${requestScope.signOnMsg != null}">-->
<!--                  <div class="feedback" id="user-account1" data-errorMsg="用户名或密码错误">用户名或密码错误</div>-->
<!--                </c:if>-->
              </div>
              <input type="text" class="input-special" id="input-account1" name="username">
            </div>
            <div class="password-form form-item">
              <div class="text-tips">
                <span class="tip">密码</span>
              </div>
              <input type="password" class="input-special" id="input-password1" name="password">
            </div>
<!--            <div class="vcode-form form-item">-->
<!--              <div class="text-tips">-->
<!--                <span class="tip">验证码</span>-->
<!--                <div class="feedback" id="user-vcode1" data-errorMsg1="验证码错误" data-errorMsg2="请输入验证码">验证码错误</div>-->
<!--              </div>-->
<!--              <input type="text" class="input-special" id="input-vcode1">-->
<!--            </div>-->
            <div class="bynandvcode">
              <button class="btn" @click="login" id="loginBtn" type="button">登录</button>
<!--              <canvas id="cvs1"></canvas>-->
            </div>
          </div>


          <div class="register-form">
            <div class="user-form form-item">
              <div class="text-tips">
                <span class="tip">账号</span>
                <div class="feedback" id="user-account2"></div>
              </div>
              <input type="text" class="input-special" id="input-account2" name="username">
              <div class="tips" id="account-tips">用户名长度必须大于5</div>
            </div>
            <div class="password-form form-item">
              <div class="text-tips">
                <span class="tip">密码</span>
                <div class="feedback" id="user-password2">密码格式不正确</div>
              </div>
              <input type="password" class="input-special" id="input-password2" name="password">
              <div class="tips" id="password-tip1">不能包括空格</div>
              <div class="tips" id="password-tip2">长度为8-16个字符</div>
              <div class="tips" id="password-tip3">必须包含数字、字母、符号中的两种</div>
            </div>
            <div class="password-form form-item">
              <div class="text-tips">
                <span class="tip">确认密码</span>
                <div class="feedback" id="user-passwordConfirm2">两次输入的密码不一致</div>
              </div>
              <input type="password" class="input-special" id="input-passwordConfirm2">
            </div>
<!--            <div class="vcode-form form-item">-->
<!--              <div class="text-tips">-->
<!--                <span clas s="tip">验证码</span>-->
<!--                <div class="feedback" id="user-vcode2" data-errorMsg="验证码错误">验证码错误</div>-->
<!--              </div>-->
<!--              <input type="text" class="input-special" id="input-vcode2">-->
<!--            </div>-->
            <div class="bynandvcode">
              <button class="btn"  id="registerBtn" type="button">注册</button>
<!--              <canvas id="cvs2"></canvas>-->
            </div>
          </div>

      </div>
    </div>
  </div>
</template>

<script src="../jquery-3.6.2.min.js"></script>

<script>
import $ from 'jquery'
import { getMenu } from '../api/data'
export default {
    data() {
        return {
            username: null,
            password: null,
        }
    },
    methods: {
        login() {
            let form = {
                username: document.getElementById('input-account1').value,
                password: document.getElementById('input-password1').value
            }
            getMenu(form).then(({ data: res }) => {
                console.log(res, 'res')
                if (res.code === 20000) {
                    // this.$store.commit('clearMenu')
                    // this.$store.commit('setMenu', res.data.menu)
                    this.$store.commit('setToken', res.data.token)
                    // this.$store.commit('addMenu', this.$router)
                    this.$router.push({ name: 'home' })
                } else {
                    this.$message.warning(res.data.message)
                }
            })
            // const token = Mock.Random.guid()
            // this.$store.commit('setToken', token)
            // this.$router.push({ name: 'home' })
        },
        go() {
            var changeBtn = document.querySelector('.slogan-change');
            changeBtn.addEventListener('click', function () {
                if (changeBtn.dataset.page === 'login') {
                  document.querySelector('.content').classList.add("add-class-content");
                  document.querySelector('.login-img').classList.add("add-class-login-img");
                  document.querySelector('.register-img').classList.add("add-class-register-img");
                  document.querySelector('.login-img').classList.remove("add-class-login-img-show");
                  document.querySelector('.login-wrapper').style.height = "80vh";
                  document.querySelector('.content').style.height = "90vh";
                  document.querySelector('.login-form').style.display = "none";
                  document.querySelector('.register-form').style.display = "block";
                  document.querySelector('.slogan-change').innerHTML = '登录';
                  document.querySelector('.text').innerHTML = '注册';
                  document.querySelector('.login-img').style.display = "none";
                  changeBtn.dataset.page = "register";
                }
                else {
                  document.querySelector('.content').classList.remove("add-class-content");
                  document.querySelector('.login-img').classList.remove("add-class-login-img");
                  document.querySelector('.login-img').classList.add("add-class-login-img-show");
                  document.querySelector('.register-img').classList.remove("add-class-register-img");
                  document.querySelector('.login-wrapper').style.height = "70vh";
                  document.querySelector('.content').style.height = "85vh";
                  document.querySelector('.login-form').style.display = "block";
                  document.querySelector('.register-form').style.display = "none";
                  document.querySelector('.slogan-change').innerHTML = '注册';
                  document.querySelector('.text').innerHTML = '登录';
                  document.querySelector('.login-img').style.display = "block";
                  changeBtn.dataset.page = "login";
                }
            });



          $(function (){
            $('#account-tips').hide();
            $('#password-tip1').hide();
            $('#password-tip2').hide();
            $('#password-tip3').hide();

            $('#user-password2').hide();
            $('#user-passwordConfirm2').hide();
            // $('.feedback').each(function(){
            //     this.hide();
            // });

            /*注册时的用户名合法性检测1-用户名不能为空*/
            $('#input-account2').on('blur', function () {
              //隐藏tips
              $('#account-tips').hide();

              var username = $(this).val();
              var validateMsg = (username)=>{
                if (username === null || username === '' || username.length === 0) {
                  return '用户名不能为空';
                }
                if (username.length <= 5) {
                  return '用户名长度必须大于5';
                }
                return '';
              }
              var validateMsg=validateMsg(username)
              //验证用户名是否存在
              if (validateMsg === '') {
                $('#user-account2').text('');
              } else {
                $('#user-account2').text(validateMsg);
              }
            });

            /*注册时当用户准备输入用户名时focus on 用户名*/
            $('#input-account2').on('focus', function () {
              //显示tips
              $('#account-tips').show();
            });

            /*注册时当用户正在输入用户名*/
            $('#input-account2').on('input', function () {
              //检测用户名是否符合要求
              var username = $(this).val();
              if (username.length > 5) {
                $('#account-tips').addClass('true-image');
              } else {
                $('#account-tips').removeClass('true-image');
              }
            });

            /*注册时密码的合法性检测*/
            $('#input-password2').on('blur', function () {
              //隐藏tips
              $('#password-tip1').hide();
              $('#password-tip2').hide();
              $('#password-tip3').hide();

              if($('#password-tip1').hasClass('true-image') &&
                  $('#password-tip2').hasClass('true-image') &&
                  $('#password-tip3').hasClass('true-image')){
                $('#user-password2').hide();
              }else{
                $('#user-password2').show();
              }
            });

            /*注册时当用户准备输入密码时focus on 密码*/
            $('#input-password2').on('focus', function () {
              //显示tips
              $('#password-tip1').show();
              $('#password-tip2').show();
              $('#password-tip3').show();
            });

            $('#input-password2').on('input', function () {
              var password = $(this).val(),
                  length   = password.length,
                  typenum  = (function(){
                    var num     = 0,
                        type1   = false,
                        type2   = false,
                        type3   = false;
                    for (var i = 0; i<length; i++) {
                      var asc = password.charAt(i);
                      if ((asc >= 'A' && asc <= 'Z' || asc >= 'a' && asc <= 'z')) {
                        type1 = true;
                      }else if (i>=0 && i<=9) {
                        type2 = true;
                      }else{
                        if(i !== ' '){
                          type3 = true;
                        }
                      }
                    }
                    if(type1 === true){
                      num++;
                    }
                    if(type2 === true){
                      num++;
                    }
                    if(type3 === true){
                      num++;
                    }
                    return num;
                  })();
              if(!password.includes(' ')){
                $('#password-tip1').addClass('true-image');
              }else{
                $('#password-tip1').removeClass('true-image');
              }
              if(length>=8 && length<=16){
                $('#password-tip2').addClass('true-image');
              }else{
                $('#password-tip2').removeClass('true-image');
              }
              if(typenum>=2){
                $('#password-tip3').addClass('true-image');
              }else{
                $('#password-tip3').removeClass('true-image');
              }
            });

            /*用户输入确认的密码后*/
            $('#input-passwordConfirm2').on('blur', function () {
              if($('#input-password2').val() !=='' && $('#input-password2').val() !== $('#input-passwordConfirm2').val()){
                $('#user-passwordConfirm2').show();
              }else{
                $('#user-passwordConfirm2').hide();
              }
            });

            $('#registerBtn').on('click',function (){
              $('.slogan-change').click();
            });
          });

        },



    },
    mounted() {
        this.go()
    }
}
</script>

<style scoped>
/*css reset*/
.box {
  font: 12px/1.5 tahoma, arial, Microsoft YaHei, sans-serif;
  margin: 0;
  padding: 0;
  /* background-color: rgb(51, 32, 108); */
  /*占满视口*/
  width: 100vw;
  height: 100vh;
  position:relative;
}

.box .content {
  width: 90vw;
  height: 85vh;
  background-color: rgb(228, 218, 232);
  border-radius: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /*flex布局*/
  display: flex;
  justify-content: center;
  /*在主轴上居中*/
  align-items: center;
  /*在垂直方向上居中*/
  overflow: hidden;
  transition: 1s;
}

.box .content .images1 {
  margin-left: -150px;
  margin-right: 100px;
  position: absolute;
  left: 15%;
}

.box .content .images2 {
  margin-left: 520px;
  margin-right: 100px;
  position: absolute;
  left: 15%;
}

.box .content .login-img {
  width: 35%;
  height: 70%;
  border-radius: 15%;
}

.box .content .register-img {
  width: 35%;
  opacity: 0;
  border-radius: 15%;
}

.box .content .login-wrapper {
  width: 30vw;
  height: 70vh;
  border-radius: 40px;
  /*实现类毛玻璃的效果*/
  backdrop-filter: blur(1px);
  background: rgba(244, 240, 245, 0.6);
  padding: 60px;
  box-sizing: border-box;
  /*padding和border的值就不会在影响元素的宽高*/
  position: absolute;
  right: 10%;
  transition: 1s;
}


.slogan-foruser {
  font-size: 25px;
  font-weight: 600;
}

.slogan-change{
  font-size: 15px;
  color: rgb(79, 133, 226);
  border-bottom: 1px solid rgb(79, 133, 226);
  float: right;
  line-height: 25px;
  cursor: pointer;
}

h1 {
  font-size: 45px;
  margin: 20px 0;
}

.tip{
  font-size: 15px;
}

.login-form{
  width: 100%;
  display: block;
}

.register-form{
  width: 100%;
  display: none;
}

.text-tips {
  color: rgb(123, 122, 123);
  margin: 5px;
}

.input-special {
  width: 100%;
  height: 50px;
  margin: 5px 0;
  border-radius: 5px;
  border: 0;
  font-size: 17px;
  padding: 0 20px;
  box-sizing: border-box;
}

.input-special:focus {
  outline: none;
  border: 1px solid rgb(79, 133, 226);
}

.btn {
  width: 150px;
  height: 50px;
  margin: 20px 0;
  background-color: rgb(59, 58, 59);
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: inline;
}

.feedback {
  display: inline-block;
  color: black;
  background-image: url('../assets/images/warning.png');
  background-repeat: no-repeat;
  background-position: 2px 14px;
  padding: 10px 0 0 22px;
  text-align: left;
  margin-left: 12vw;
}

.tips {
  padding: 10px 0 0 22px;
}

.true-image {
  background-image: url('../assets/images/hint.png');
  background-repeat: no-repeat;
  background-position: 2px 14px;
}

#cvs1{
  display: inline;
  height: 70px;
  width: 100px;
  margin-left: 3vw;
  padding-top: 2vw;
  left: 5vw;
}

#cvs2{
  display: inline;
  height: 70px;
  width: 100px;
  margin-left: 3vw;
  padding-top: 2vw;
  left: 5vw;
}

.add-class-content {
  background-color: rgb(255, 255, 240) !important;
  transition: .1s;
}
.add-class-login-img {
  animation: disappear 0.3s forwards;
  animation-timing-function: ease;
}
.add-class-login-img-show {
  animation-delay: 1s;
  animation: appear 1s forwards;
  animation-timing-function: ease;
}
.add-class-register-img {
  animation: appear 1s forwards;
  animation-timing-function: ease;
  animation-delay: .2s;
  transform: translate(-100%, 0);
}
@keyframes appear {
  from {
    border-radius: 15%;
    opacity: 0;
  }
  to {
    border-radius: 0%;
    opacity: 1;
  }
}

@keyframes disappear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/*# sourceMappingURL=style.css.map */
</style>
